<template>
  <div>
     <div class="mask" v-if="isApp"></div>
       <div class="payment-wrap" v-if="isApp">
         <h2>选择支付方式 <span class="close-pay" @click="closeIcon"></span></h2>
          <p>请在30分钟内完成支付 金额
              <b v-if="type==1">¥{{telPrice}}</b>
              <b v-if="type==2 && flowType==1">¥{{countryPrice}}</b>
              <b v-if="type==2 && flowType==2">¥{{provincePrice}}</b>
          </p>
          <ul class="payment-order-info mb-10 bg-fff">
              <li class="pay-alipay">
                  支付宝
                  <i class="right pay-select" :class="{'on':payType==2}" @click="payType = 2"></i>
              </li>
              <li class="pay-unionPay" >
                 银联支付
              <i class="right pay-select" :class="{'on':payType==1}" @click="payType = 1"></i>
              </li>
          </ul>
          <div class="payment-btn">
            <payBar :isSuccess='0' :orderId="orderId" :payChannel="payType" fromPage="tel" :payPrice="payPrice"></payBar>
          </div>
      </div>
  </div>
</template>

<script>
import payBar from '@/components/payBar'
export default {
  name:"payBox",
  data () {
     return {
      payType:2,
      isApp:this.GetQueryString('isApp')
     }
  },
  props:['telPrice','type','flowType','countryPrice','provincePrice','orderId','payPrice'],
  components:{
    payBar
  },
  methods:{
    // url里面拿需要的参数
  GetQueryString (name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) return r[2]
    return null
  },
   closeIcon (){
     this.$emit("close");
   }
  }
}
</script>

<style scoped lang="less">
  .payment-wrap {

  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  background: #fff;
  overflow: hidden;
  h2 {
    height: 37px;
    line-height: 37px;
    font-size: 16px;
    background: #f0f0f0;
    text-align: center;
    position: relative;
    .close-pay {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 50%;
      right: 10px;
      margin-top: -6px;
      background: url() no-repeat;
      background-size: 100%;
    }
  }
  p {
    font-size: 13px;
    text-align: center;
    padding: 11px 0;
    b {
      color: #f00;
    }
  }
  .payment-btn {
    width: 92%;
    margin: 15px auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background: #F1002D;
    border-radius: 4px;
  }
}



.payment-order-info {padding: 0 10px;
  li {
    padding: 12px 0;
    & + li {
      border-top: 1px solid #f0f0f0;
    }
  }
}
.pay-unionPay:before, .pay-alipay:before, .pay-wx:before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 5px;
  background: no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.pay-unionPay {
  &:before {
    background-image: url();
  }
}
.pay-alipay {
  &:before {
    background-image: url();
  }
}
.pay-wx {
  &:before {
    background-image: url();
  }
}
.pay-select {
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-sizing: border-box;
  float: right;
  &.on {
    background: url() no-repeat;
    background-size: cover;
    border: none;
  }
}
.gray-bg {
  background: #d9d9d9;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
}
</style>
